<template>
	<view class="content">

		<!--评价列表-->
		<view class="list" v-if="evaluationList.length > 0">
			<view class="eva-section"  >
      						<view class="e-header">
      							<text class="tit">{{ evaluationList.length || 0 }}人在拼单,可直接参与</text>
      						
      						</view>
      						<view class="eva-box" v-for="(item, index) in evaluationList" :key="index" v-if="evaluationList && evaluationList.length > 0">

      							<image class="portrait" :src="item.customerPic || headImg  "
      							 mode="aspectFill"></image>
      							 <image v-if="item.groupMemberOrders && item.groupMemberOrders.length > 0"
      							  v-for="(item1, index1) in item.groupMemberOrders" :key="index1"
      							  class="portrait" :src="item1.customerPic || headImg "
                     							 mode="aspectFill"></image>
      							<view class="right">
      								<view class="bot" v-if="(item.groupNum-1-item.groupMemberOrders.length)>0">
      									<text class="attr" >还差{{
                  									(item.groupNum-1-item.groupMemberOrders.length)
                  								}}人拼成</text>
                  									<text class="time">
                                                        										<rf-count-down :show-day="false" :second="second(item.payTime)" color="#FFFFFF" :background-color="themeColor.color"
                                                        										 :border-color="themeColor.color" />
                                                        									</text>


      								</view>
      								<view class="bot" v-else>
                            <text class="attr" >拼团成功</text>
                     	</view>

      							</view>
      						</view>
			</view>
		</view>
		<view class="no-evaluation" v-else>
			暂无拼团记录
		</view>
	</view>
</template>

<script>
import { groupAllorders } from '@/api/product';
import moment from '@/common/moment';
import rfCountDown from '@/components/rf-count-down';
import rfRate from '@/components/rf-rate/rf-rate';
export default {
	components: {
		rfRate,rfCountDown
	},
	data() {
		return {
			evaluateStat: {},

			evaluationList: [],
			marketingId:0,
			pageNum :0,
			headImg: this.$mAssetsPath.headImg,
			singleSkuText: this.singleSkuText
		};
	},
		computed: {

  			// 计算倒计时时间
  			second() {
  					return function(val) {

                           					return Math.floor((new Date(new Date(val).getTime()+24*60*60*1000) - new Date()) / 1000);
                           				};
  			},

  		},
	filters: {
		// 时间格式化
		time(val) {
			return moment(val * 1000).format('YYYY-MM-DD HH:mm');
		},
		// 计算评论与追评时间
		againDay(val) {
			const day =
				moment(val.again_addtime * 1000).format('DD') -
				moment(val.created_at * 1000).format('DD');
			return day ? `${day}天后追加` : '当天追加';
		}
	},
	onLoad(options) {
		this.initData(options);
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.evaluationList.length = 0;
		this.pageNum = 0;
		this.getEvaluationList('refresh');
	},
	// 加载更多
	onReachBottom() {
  if (this.loadingType === 'nomore') return;
		this.pageNum++
		this.getEvaluationList();
	},
	methods: {
		// 初始化数据
		initData(options) {
			this.id = options.skuId;
			this.marketingId = options.marketingId;

			this.getEvaluationList();
		},
		// 获取评论列表
		async getEvaluationList(type, index = 0, params) {
			if (params) {
				this.pageNum = 0;
				this.evaluationList = [];
			}
			await this.$http
				.get(`${groupAllorders}`, {
					skuId: this.id,
					pageNum: this.pageNum,

					marketingId: this.marketingId,
					...params
				})
				.then(r => {
				console.log(r)

					this.evaluationList = [...this.evaluationList, ...r.list];
				})
				.catch(() => {
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.myVideo {
	position: fixed;
	top: 50%;
	right: 100%;
}
.content {
	view {
		display: flex;
	}
	width: 100%;
	.label {
		padding: 0 2%;
		flex-wrap: wrap;
		view {
			padding: 0 20upx;
			height: 50upx;
			border-radius: 40upx;
			border: solid 1upx #ddd;
			align-items: center;
			font-size: 26upx;
			margin: 10upx 20upx 10upx 0;
			&.on {
				border: solid 1upx;
			}
		}
	}
	.list {
		flex-wrap: wrap;
		padding: 20upx 4%;
		.row {
			width: 100%;
			margin-top: 30upx;
			.left {
				width: 10vw;
				flex-shrink: 0;
				margin-right: 10upx;
				.face {
					width: 100%;
					image {
						width: 10vw;
						height: 10vw;
						border-radius: 100%;
					}
				}
			}
			.right {
				width: 100%;
				flex-wrap: wrap;
				.name-date {
					width: 100%;
					justify-content: space-between;
					align-items: baseline;
					.username {
						font-size: 32upx;
						color: #555;
					}
					.date {
						font-size: 28upx;
						color: #aaa;
					}
				}
				.spec {
					width: 100%;
					color: #aaa;
					font-size: 26upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.first {
					width: 100%;
					flex-wrap: wrap;
					.rat {
						font-size: $font-base;
						line-height: 1.5;
					}
					.img-video {
						width: 100%;
						flex-wrap: wrap;
						.box {
							width: calc((84.6vw - 50upx) / 4);
							height: calc((84.6vw - 50upx) / 4);
							margin: 5upx 5upx;
							position: relative;
							justify-content: center;
							align-items: center;
							.image {
								position: absolute;
								width: 100%;
								height: 100%;
								border-radius: 10upx;
							}
							.playbtn {
								position: absolute;
								.icon {
									font-size: 80upx;
									color: rgba(255, 255, 255, 0.9);
								}
							}
						}
					}
				}

				.append {
					width: 100%;
					flex-wrap: wrap;
					.date {
						width: 100%;
						height: 40upx;
						border-left: 10upx solid #f06c7a;
						padding-left: 10upx;
						align-items: center;
						font-size: 32upx;
						margin: 20upx 0;
					}
					.rat {
						font-size: 30upx;
					}
					.img-video {
						width: 100%;
						flex-wrap: wrap;
						.box {
							width: calc((84.6vw - 10upx - (10upx * 4)) / 4);
							height: calc((84.6vw - 10upx - (10upx * 4)) / 4);
							margin: 5upx 5upx;
							position: relative;
							justify-content: center;
							align-items: center;
							.image {
								position: absolute;
								width: 100%;
								height: 100%;
								border-radius: 10upx;
							}
							.playbtn {
								position: absolute;
								.icon {
									font-size: 80upx;
									color: rgba(255, 255, 255, 0.9);
								}
							}
						}
					}
				}
			}
		}
	}
	.no-evaluation {
		overflow: hidden;
		display: block;
		width: 100%;
		text-align: center;
		margin-top: 60upx;
		color: #555;
	}
}
</style>
